<template>
  <div class="right-warpper">
    <div class="date">{{ Dates }}</div>
    <div class="week">{{ Weeks }}</div>
    <div class="time">{{ Times }}</div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  name: "TimeComponent"
})
export default class extends Vue {
  Dates = "";
  Weeks = "";
  Times = "";
  created() {
    setInterval(this.getNowDate, 1000); //每一秒执行一次
  }
  mounted() {
    this.getNowDate();
  }

  getNowDate() {
    const NewDate = new Date();
    let month: string | number =
      NewDate.getMonth() + 1 > 9
        ? NewDate.getMonth() + 1
        : "0" + (NewDate.getMonth() + 1);
    let day: string | number =
      NewDate.getDate() > 9 ? NewDate.getDate() : "0" + NewDate.getDate();

    let hour: string | number =
      NewDate.getHours() > 9 ? NewDate.getHours() : "0" + NewDate.getHours();
    let minus: string | number =
      NewDate.getMinutes() > 9
        ? NewDate.getMinutes()
        : "0" + NewDate.getMinutes();
    let seconds: string | number =
      NewDate.getSeconds() > 9
        ? NewDate.getSeconds()
        : "0" + NewDate.getSeconds();

    let weekday = new Array(7);
    weekday[0] = "星期日";
    weekday[1] = "星期一";
    weekday[2] = "星期二";
    weekday[3] = "星期三";
    weekday[4] = "星期四";
    weekday[5] = "星期五";
    weekday[6] = "星期六";
    this.Weeks = weekday[NewDate.getDay()]; //返回当前时间是星期几

    this.Dates = NewDate.getFullYear() + "-" + month + "-" + day;
    this.Times = hour + ":" + minus + ":" + seconds;
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.right-warpper {
  position: absolute;
  right: 5px;
  height: 30px;
  width: 310px;
  display: flex;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-style: italic;
  line-height: 30px;
  color: #ffffff;
  padding-top: 35px;

  .date {
    width: 100px;
    height: 30px;
    font-size: 14px;
    background-image: linear-gradient(to bottom, #fff, #08ebff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .week {
    width: 80px;
    height: 30px;
    font-size: 18px;
    background-image: linear-gradient(to bottom, #fff, #08ebff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .time {
    width: 120px;
    height: 30px;
    font-size: 24px;
    background-image: linear-gradient(to bottom, #fff, #08ebff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
